<template>
 <div class="wp-tab-box">
       <div class="wp-tab-box__btn">
      <!-- <el-button -->
<!-- type="warning" icon="el-icon-plus" @click.native="handleContacts">创建合同</el-button> -->
    </div>
        <div class="wp-tabel">
    <el-table
        max-height="300"
       highlight-current-row
       stripe
       :data="contractList"
       :tooltip-effect="'dark'"
        empty-text="暂无合同">
      <el-table-column label="合同名称" prop="contractName">
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click="contractDetail(scope.row)"
              >{{ scope.row.contractName }}</el-link>
          </template>
      </el-table-column>
      <el-table-column label="订单号" prop="orderNo"></el-table-column>
      <el-table-column label="合同商定日期"  width="120" prop="contractDealDate">
        <template slot-scope="scope">
          {{scope.row.contractDealDate | FormatDate('yyyy-MM-dd')}}
        </template>
      </el-table-column>
      <el-table-column label="完成日期" prop="contractCompletionTime"></el-table-column>
      <el-table-column label="状态" prop="statusName"></el-table-column>
    </el-table>
    <ContractDetailPanel
      v-if="visibleContractDetail"
      sourceType="customer"
      :show.sync="visibleContractDetail"
      :data.sync="contractDetailData"
    />
    </div>
 </div>
</template>
<script>
import Mixins from '../mixins'
import ContractDetailPanel from '@/views/eims/sales/contract/components/DetailPanel'
export default {
  props: {
    param: {type: Object,
      default: () => {
        return {}
      }}
  },
  mixins: [Mixins],
  components: {ContractDetailPanel},
  watch: {
    param: {
      handler (val) {
        this.customerInfo = {...val}
      },
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      visibleContractDetail: false,
      contractDetailData: {},
      contractList: [],
      customerInfo: {}
    }
  },
  created () {
    this.getCustomerContractInfoList(this.customerInfo)
  },
  methods: {
    getCustomerContractInfoList (customerInfo) {
      this.requestOption('customerGetContract', customerInfo.customerCode, (res) => {
        this.contractList = res.data || []
      })
    },
    contractDetail (row) {
      this.visibleContractDetail = true
      this.contractDetailData = {...row}
    }
  }
}
</script>

<style lang="scss" scoped>
.wp-tab-box{
  &__btn{
  text-align: right;
  margin: 5px;
  }
}
</style>
